<template>
  <div class='construction-section-container'>
    <div class="project-tree">
      <h2>{{projectDetail.project_name}}</h2>
      <ProjectTree :uuid="uuid"
                   :projectId="Number(projectDetail.project_id)"
                   :curMenu.sync="selectedNode"
                   :proName.sync='getProName'></ProjectTree>
    </div>

    <div class="construction-section">
      <el-button @click="editSection('create',{})"
                 :disabled="editSectionDisabled"
                 type="primary">添加施工段</el-button>
      <!-- <p class="actual-total">
        实际浇筑总量(m³)
        <span>{{sectionList.total}}</span>
      </p> -->
      <el-table class="section-table"
                :header-cell-style="{background:'#f5f5f5'}"
                :data="sectionList.list">
        <el-table-column type="index"
                         label='序号'
                         width="100">
        </el-table-column>
        <el-table-column label="施工段"
                         prop="section_name">
        </el-table-column>

        <el-table-column label="更新时间"
                         prop="updated_at">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="editSection('update',scope.row)">编辑</el-button>
            <el-button @click="deleteSection(scope.row)"
                       type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <EditSectionDialog :dialogVisible.sync="editSectionDialogVisible"
                       :curFloor="curFloor"
                       @callback="editSectionCb"
                       :dialogStatus="editSectionDialogStatus"
                       :dialogForm="editSectionDialogData"></EditSectionDialog>
  </div>
</template>
<script>
import ProjectTree from './components/ProjectTree'
import EditSectionDialog from './components/EditSectionDialog'
import { monitorPublicApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      menuTreeData: [],
      uuid: 1,
      projectName: '',
      requestParam: {
        wbs_id: 1
      },
      projectId: 41,
      // 施工段列表数据
      sectionList: {
        list: [],
        data: [

        ],
        total: '0.00',
        total_page: 0
      },
      // 编辑施工段弹框是否可见
      editSectionDialogVisible: false,
      // 编辑施工段弹框状态
      editSectionDialogStatus: 'create',
      // 编辑施工段弹框数据
      editSectionDialogData: {
        project_id: '',
        wbs_id: '',
        uuid: this.uuid
      },
      // 当前选中的节点
      selectedNode: {},
      // 当前选择的楼层及楼栋
      curFloor: '',
      // 根据选中的是楼栋还是楼层切换按钮能否点击
      editSectionDisabled: true,
      getProName: {},
      projectDetail: {}
    }
  },
  components: {
    ProjectTree,
    EditSectionDialog
  },
  computed: {
    getProject () {
      let projectObj = this.$store.state.choosedProject
      let projectLocal = JSON.parse(
        window.localStorage.getItem('choosedProject')
      )
      let projectInfo = projectObj || projectLocal
      return projectInfo
    }
  },

  watch: {
    selectedNode: {
      handler (newval, oldval) {
        console.log(newval, 'selected node')
        if (newval.wbs_type !== '4') {
          this.editSectionDisabled = true
        } else {
          this.editSectionDisabled = false
          this.editSectionDialogData.wbs_id = newval.wbs_id
          this.requestParam.wbs_id = newval.wbs_id
          // this.curFloor = newval.p_desc + '-' + newval.desc
          this.curFloor = newval.parentNode.wbs_name + '-' + newval.wbs_name
          this.getSectionList()
        }
      },
      deep: true
    },
    getProName: {
      handler (newval, oldval) {
        // console.log(newval, 'selected node')
        this.projectName = newval
      },
      deep: true
    },
    getProject: {
      handler (newval) {
        this.projectDetail = newval

        this.pending = true
      },
      deep: true
    }
  },
  methods: {
    // 新增或修改施工段
    editSection (status, data) {
      let temp = JSON.parse(JSON.stringify(data))
      temp.project_id = this.projectId
      // temp.uuid = this.uuid
      temp.wbs_id = this.requestParam.wbs_id
      this.editSectionDialogStatus = status
      this.editSectionDialogData = temp
      this.editSectionDialogVisible = true
    },
    // 获取施工段列表
    getSectionList () {
      monitorPublicApi.getConstructionList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.sectionList.list = res.data.list
        }
      })
    },
    // 编辑施工段成功回调
    editSectionCb () {
      this.getSectionList()
    },
    // 删除施工段
    deleteSection (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSectionApi(row.project_construction_id)
      }).catch(() => {

      })
    },
    deleteSectionApi (id) {
      let data = {
        project_construction_id: id
      }
      monitorPublicApi.deleteConstruction({
        data: data
      }).then(res => {
        console.log('222--->', res)
        if (res.code === 0) {
          this.$message.success('删除施工段成功')
          this.getSectionList()
        }
      })
    }
  },

  created () {
    // 获取已选择项目数据
    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    let choosedProject = store.project_id ? store : JSON.parse(local)
    this.projectDetail = choosedProject
    // this.projectId = this.$route.query.projects || 41
    // this.projectName = this.$route.query.projectName
    this.editSectionDialogData.uuid = this.uuid
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.construction-section-container {
  padding: 20px;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  .actual-total {
    margin: 20px 0 10px;
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
  .project-tree {
    width: 220px;
    height: 840px;
    // padding-right: 20px;
    border-right: 1px solid #d9d9d9;
    overflow-y: scroll;
    h2 {
      width: 200px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      background-color: #f5f5f5;
      color: #333;
      font-size: 14px;
      margin: 0 0 10px;
    }
  }
  .construction-section {
    margin-left: 20px;
    flex: 1;
    .section-table {
      margin-top: 10px;
    }
  }
}
</style>
